﻿<h2>My Applicants</h2>

Select Your Job Vacancy :

<select ng-model="item" ng-change="list()">
    <option ng-repeat="vacancy in vacancys" value="{{vacancy.vacancy_id}}">{{vacancy.vacancy_id}} - {{vacancy.vacancy_for}}
    </option>
</select>


<div class="row">
    <p align="right">
        <input type="text" class="search-query" placeholder="Search" ng-model="searchText">
    </p>


    <div ng-hide="applicants.length" class="alert alert-info" role="alert">No applicants for this job vacancy...</div>


    <div class="well" ng-repeat="applicant in applicants | filter:searchText">
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="{{applicant.pictureURL}}">
            </a>
            <div class="media-body">
                <h4 class="media-heading">{{applicant.firstName}} {{applicant.lastName}}</h4>
                <p class="text-right">{{applicant.headline}}</p>
                <p>{{applicant.summary}}</p>
                <p style="text-align: right">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{applicant.id}}">
                        View Profile...
                    </button>
                </p>
            </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="{{applicant.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{{applicant.firstName}} {{applicant.lastName}}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-3 col-lg-3 " align="center">
                                    <img alt="User Pic" src="{{applicant.pictureURL}}" class="img-circle">
                                </div>
                                <div class=" col-md-9 col-lg-9 ">
                                    <div role="tabpanel">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li role="presentation" class="active">
                                                <button data-target="#main{{applicant.id}}" aria-controls="main{{applicant.id}}" role="tab" data-toggle="tab" class="btn">Profile</button></li>
                                            <li role="presentation">
                                                <button data-target="#education{{applicant.id}}" aria-controls="education{{applicant.id}}" role="tab" data-toggle="tab" class="btn">Education</button></li>
                                            <li role="presentation">
                                                <button data-target="#skills{{applicant.id}}" aria-controls="skills{{applicant.id}}" role="tab" data-toggle="tab" class="btn">Skills</button></li>
                                            <li role="presentation">
                                                <button data-target="#projects{{applicant.id}}" aria-controls="projects{{applicant.id}}" role="tab" data-toggle="tab" class="btn">Projects</button></li>
                                            <li role="presentation">
                                                <button data-target="#positions{{applicant.id}}" aria-controls="positions{{applicant.id}}" role="tab" data-toggle="tab" class="btn">Positions</button></li>
                                            <li role="presentation">
                                                <button data-target="#certifications{{applicant.id}}" aria-controls="certifications{{applicant.id}}" role="tab" data-toggle="tab" class="btn">Certifications</button></li>
                                            <li role="presentation">
                                                <button data-target="#reccomandations{{applicant.id}}" aria-controls="reccomandations{{applicant.id}}" role="tab" data-toggle="tab" class="btn">Reccomandations</button></li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content">
                                            <div role="tabpanel" class="tab-pane active" id="main{{applicant.id}}">
                                                <table class="table table-user-information">
                                                    <tbody>
                                                        <tr>
                                                            <td>Name:</td>
                                                            <td>{{applicant.firstName}} {{applicant.lastName}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Current Position:</td>
                                                            <td>{{applicant.headline}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Industry:</td>
                                                            <td>{{applicant.industry}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Experience:</td>
                                                            <td>{{applicant.experience}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Age:</td>
                                                            <td>{{applicant.age}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Email:</td>
                                                            <td>{{applicant.email}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>LinkedIn Profile:</td>
                                                            <td><a href="{{applicant.profileURL}}" target="_blank">{{applicant.id}}</a></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div role="tabpanel" class="tab-pane" id="education{{applicant.id}}">
                                                <div ng-repeat="education in applicant.educations">
                                                    <br />
                                                    <div class="panel panel-success">
                                                        <div class="panel-heading">
                                                            <h3 class="panel-title">
                                                                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"> {{education.school}}</span></h3>
                                                        </div>
                                                        <div class="panel-body">
                                                            <b>{{education.degree}}</b><br />
                                                            {{education.field}}
                                                                <br />
                                                            <br />
                                                            <p>
                                                                {{education.notes}}
                                                            </p>
                                                        </div>
                                                        <div class="panel-footer">
                                                            <span class="glyphicon glyphicon-calendar" aria-hidden="true"> {{education.start}} - {{education.end}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div role="tabpanel" class="tab-pane" id="skills{{applicant.id}}">
                                                <br />
                                                <span ng-repeat="skill in applicant.skills" class="label label-success">{{skill.name}}<br />
                                                </span>
                                            </div>
                                            <div role="tabpanel" class="tab-pane" id="projects{{applicant.id}}">
                                                <div ng-repeat="project in applicant.projects">
                                                    <br />
                                                    <div class="panel panel-success">
                                                        <div class="panel-heading">
                                                            <h3 class="panel-title">
                                                                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"> {{project.name}}</span></h3>
                                                        </div>
                                                        <div class="panel-body">
                                                            <p>
                                                                {{project.description}}
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div role="tabpanel" class="tab-pane" id="positions{{applicant.id}}">
                                                <div ng-repeat="position in applicant.positions">
                                                    <br />
                                                    <div class="panel panel-success">
                                                        <div class="panel-heading">
                                                            <h3 class="panel-title">
                                                                <span class="glyphicon glyphicon-briefcase" aria-hidden="true"> {{position.company}}</span></h3>
                                                        </div>
                                                        <div class="panel-body">
                                                            <p>
                                                                {{position.title}}
                                                            </p>
                                                        </div>
                                                        <div class="panel-footer">
                                                            <span class="glyphicon glyphicon-calendar" aria-hidden="true"> {{position.start}} - {{position.end}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div role="tabpanel" class="tab-pane" id="certifications{{applicant.id}}">
                                                <div ng-repeat="certification in applicant.certifications">
                                                    <br />
                                                    <span class="glyphicon glyphicon-certificate"> {{certification.name}}</span>
                                                    </div>
                                                </div>
                                            <div role="tabpanel" class="tab-pane" id="reccomandations{{applicant.id}}">
                                                <br />
                                                <blockquote ng-repeat="reccomandation in applicant.recommandations">
                                                    <p>{{reccomandation.text}}</p>
                                                    <footer>{{reccomandation.firstName}} {{reccomandation.lastName}}</footer>
                                                </blockquote>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
            </div>
        </div>





    </div>

    <div class="well" ng-hide="applicants[0].trial!='TRIAL'">
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" width="80px" height="80px" src="../img/profile_empty.jpg">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Anonymous</h4>
                <p>There are other qualified applicants applied for this vacancy. Upgrade to premium to view them all.</p>
                <a href="#" onclick="window.location.assign('/Payment/Index2')" class="btn btn-xs btn-danger pull-right">Upgrade to Premium</a>
            </div>
        </div>
    </div>

</div>
